<template>
  <div class="menu">
    <div class="logo"><img src="../assets/images/logo.png" /></div>

    <div class="menu-items">
      <el-scrollbar style="height: 100%">
        <el-menu
          router
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#060716"
          text-color="#9f9f9f"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="/home">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="/recommend">
            <i class="iconfont icon-recommand"></i>
            <span slot="title">推荐</span>
          </el-menu-item>
          <el-menu-item index="/attention">
            <i class="iconfont icon-point-like"></i>
            <span slot="title">关注</span>
          </el-menu-item>
          <el-menu-item index="/friend">
            <i class="iconfont icon-friend"></i>
            <span slot="title">朋友</span>
          </el-menu-item>
          <el-menu-item index="/user">
            <i class="el-icon-user"></i>
            <span slot="title">我的</span>
          </el-menu-item>
          <el-menu-item index="/hot">
            <i class="iconfont icon-hot-point"></i>
            <span slot="title">热点</span>
          </el-menu-item>
          <hr
            style="width: 70px; margin: 10px auto; border: 1px solid #2d2d2d"
          />
          <div>
            <el-menu-item
              :index="item.typePath"
              :route="{ path: '/type', query: { typeId: item.typeId } }"
              v-for="item in worksTypeList"
              :key="item.typeId"
            >
              <i :class="item.typeIcon"></i>
              <span slot="title">{{ item.typeName }}</span>
            </el-menu-item>
          </div>
        </el-menu>
      </el-scrollbar>
    </div>

    <div class="reference">
      <div class="recode">
        <p>2023 © 音秀</p>
        <p>赣ICP备2023006182号</p>
        <hr style="width: 90px; margin: 10px auto; border: 1px solid #2d2d2d" />
        <p>网络谣言曝光台</p>
        <p>网上有害信息举报</p>
        <p>违法和不良信息举报 400-140-2108</p>
        <p>青少年守护专线 400-9922-556</p>
        <p>算法推荐专项举报 sfjubao@bytedance.com</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getWorksTypeListApi } from "@/api/menu";
export default {
  data() {
    return {
      worksTypeList: [],
      activeIndex: this.$route.path,
    };
  },
  created() {
    this.getWorksTypeListFun();
  },
  mounted() {
    // this.activeIndex = ;
  },
  watch: {
    $route: "getPath",
  },
  methods: {
    getPath() {
      this.activeIndex = this.$route.path;
    },
    getWorksTypeListFun() {
      getWorksTypeListApi().then((res) => {
        if (res.data.code == 200) {
          this.worksTypeList = res.data.data;
        }
      });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.logo {
  width: 157px;
  position: fixed;
  height: 70px;
  left: 0;
  top: 0;
  z-index: 999;
}
.logo img {
  width: 100%;
  height: 70px;
  background: #060716;
}
.menu-items {
  overflow: hidden;
  width: 100%;
  margin-top: 70px;
  height: 500px;
}
.menu-items .el-menu-item {
  font-size: 16px;
  font-weight: 600;
}
.menu-items .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: scroll;
  margin-right: -19px !important;
}
.menu-items .el-menu {
  border: none;
}
.menu {
  width: 158px;
}
.menu-items .el-menu-item i {
  color: #909399;
  font-size: 18px;
}
.reference {
  width: 157px;
  height: 50px;
  display: block;
  font-family: PingFang SC, DFPKingGothicGB-Regular, sans-serif;
  font-size: 10px;
  position: absolute;
  background: #060716;
  margin-top: 10px;
}
.recode {
  display: flex;
  flex-direction: column;
  padding: 0px 18px 10px;
  position: relative;
  transform: scale(0.9);
}
.recode p {
  word-wrap: break-word;
  color: #656565;
}
</style>
